<template>
	<div @keyup.enter="submit()" @click.self='freshData()' class="modal add-net-manage" id="addrole" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">新增系统管理员</h4>
					<span class="close" @click='freshData()' data-dismiss="modal" aria-hidden="true">&times;</span>				
				</div>
				<!--正在请求-->
				<div class="modal-body result" v-show="result=='loading'">
					<div >
						<img src="../../../../img/loading.gif" />
						<p style="color: #000000;">正在添加中，请稍后……</p>
					</div>
				</div>
				<!--成功-->
				<div class="modal-body result" v-show="result=='success'">
					<div>
						<img src="../../../../img/success.png" />
						<span >{{$t('common.successNotice')}}</span>
					</div>
				</div>
				<!--添加-->
				<div v-show="result=='add'" class="modal-body">
					<table>
						<tbody>
							<tr>
								<td style="width:100px;">用户名：</td>
								<td>
									<input type="text" class="userName" v-model="user_id" @blur="testVal('.userName', 'username')" @focus="noEmpty('.userName')" placeholder="6~18个字符，由字母、数字、下划线组成"><span class="mi">* 必填</span>
								</td>
							</tr>
							<tr>
								<td>认证方式：</td>
								<td>
									<select id="auth_way" v-model="auth_way">
										<option value="1">口令认证</option>
										<option value="2">Dkey</option>
									</select>
								</td>
							</tr>
							<tr>
								<td style="width:100px;">设置密码：</td>
								<td >
									<input type="password" class="addPassword" @blur="isEmpty('.addPassword')" @focus="noEmpty('.addPassword')" v-model="password"><span class="mi">* 必填</span>
								</td>
							</tr>
							<tr>
								<td style="width:100px;">确认密码：</td>
								<td >
									<input type="password" @blur='passwordTest(".rpassword")' class="rpassword" v-model="rpassword"><span style="display: none" class="mi">* 两次输入不一直</span>
								</td>
							</tr>
							<tr>
								<td style="width:100px;">真实姓名：</td>
								<td >
									<input type="text" v-model="real_name">
								</td>
							</tr>
							<tr>
								<td style="width:100px;">公司部门：</td>
								<td >
									<input type="text" v-model="department">
								</td>
							</tr>
							<tr>
								<td style="width:100px;">邮箱地址：</td>
								<td >
									<input type="text" class="email" @blur="testVal('.email', 'email')" @focus="noEmpty('.email')" v-model="email" >
								</td>
							</tr>
							<tr>
								<td>角色：</td>
								<td>
									<select id="user_role" v-model="role">
										<option value="1">超级管理员</option>
										<option value="2">管理员</option>
										<option value="3">审计员</option>
									</select>
								</td>
							</tr>
							<tr>
								<td colspan="2" style="text-align: center;height: 60px;">
									使用Dkey认证 （DKey日志权限：只有插入DKey才能查询审计日志，DKey登录权限：只有插入DKey才能登录管理）
								</td>
							</tr>
						</tbody>
					</table>
					<p class="note">（注：DKey写入操作前，请先下载并安装DKey驱动；一个DKey只能仅存一个用户的Dkey信息，写入DKey将覆盖上一个用户的DKey信息）</p>
				</div>
				<div class="modal-footer">
					<div class="notice">
						<span>*{{errorMsg}}</span>
					</div>
					<button class="sure-btn sure button button--aylen" @click="submit()">确 认</button>
					<button class="cancel-btn cancel button button--aylen"  @click="closeAdd()">取 消</button>					
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import userservice from 'services/userService'
	import formatTest from 'libs/formatTest'
	export default {
		data() {
			return {
				user_id:"",
				role:"2",
				real_name:"",
				department:"",
				email:"",
				auth_way:1,
				password:"",
				rpassword:"",
				result:"add",
				errorMsg:"",
				emailStatus:true
			}
		},
		mounted() {
			this.addselecter()
		},
		methods: {
			submit() {
				this.errorMsg = ""
				$('.notice').hide()
				if (this.validata()) {
					let user = `${this.user_id}|${this.password}|${$("#user_role").val()}|${this.real_name == "" ? "" : this.real_name}|`
					+`${this.department == "" ? "" : this.department}|${this.email == "" ? "" : this.email}`
					this.result = "loading"
					userservice.addUser(user)
					.then((res) => {
						
						if (res.errcode === 0) {
							this.result = "success"
							this.$emit('getData');
							let _this=this
							setTimeout(function () {
								$('#addrole').modal('hide');
								_this.freshData();
							}, 800);
						} else {
							this.result = "add"
							this.errorMsg = res.errorMessage
							// if (res.errorindexOf("数据库操作出错") >= 0) {
							// 	this.errorMsg = "数据库错误!"
							// }
							$('.notice').show().addClass('animated shake')
							setTimeout(function() {
								$('.notice').removeClass('animated shake')
							}, 200)
						}
					})
				}
				
			},
			closeAdd() {
        $("#addrole").modal('hide')
				this.freshData()
      },
			addselecter() {
				let _this = this
				$('#auth_way').change(function() {
					if ($(this).children('option:selected').val()=="2") {
						_this.role = "1"
					} else {
						_this.role = "2"
					}
				})
				$('#user_role').change(function() {
					if ($(this).children('option:selected').val()=="1") {
						_this.auth_way = "2"
					} else {
						_this.auth_way = "1"
					}
				})
			},
			testVal(ele, reg) {
				let val = $(ele).val()
				let test = new formatTest(ele, reg, false)
				if (ele=='.email'&&!test.testFormat()) {
					this.emailStatus=false
				} else {
					this.emailStatus=true
				}
				return test.testFormat()
			},
			testValnull(ele, reg) {
				let val = $(ele).val()
				let test = new formatTest(ele, reg, true)
				return test.testFormat()
			},
			isEmpty(ele) {
				if ($(ele).val()=='') {
					 $(ele).css("border",'1px solid #b63039')
					$(ele).addClass("animated shake")
					setTimeout(function() {
						$(ele).removeClass('animated shake')
					}, 200)
					$(ele).parent().find('.mi').css("color",'#b63039')
					return false
				} else {
					$(ele).css("border",'1px solid #d2d2d2')
					$(ele).parent().find('.mi').css("color",'#d2d2d2')
					return true
				} 
			},
			passwordTest(ele) {
				if (this.password!=this.rpassword) {
					 $(ele).css("border",'1px solid #b63039')
					$(ele).addClass("animated shake")
					setTimeout(function() {
						$(ele).removeClass('animated shake')
					}, 200)
					$(ele).parent().find('.mi').css("color",'#b63039')
					$(ele).parent().find('.mi').show()
					return false	
				} else {
					$(ele).css("border",'1px solid #d2d2d2')
					$(ele).parent().find('.mi').css("color",'#d2d2d2')
					$(ele).parent().find('.mi').hide()
					return true
				}
			},
			noEmpty(ele) {
				let test = new formatTest(ele)
			    test.notEmpty()
			},
			validata() {
				if ($('.email').val()) {
					this.testVal('.email', 'email')
				}
				if (this.emailStatus||!$('.email').val()) {
					if (this.testVal('.userName', 'username')&&this.isEmpty('.addPassword')&&this.passwordTest(".rpassword")) {
						return true
					} else {
						return false
					}
				} else {
					return false
				}
			},
			freshData() {
				this.user_id="",
				this.role="2",
				this.auth_way="1",
				this.real_name="",
				this.department="",
				this.email="",
				this.password="",
				this.rpassword=""
				this.errorMsg = ""
				this.result='add'
				$('.notice').hide()
				$('.rpassword').parent().find('.mi').hide()
				$('.mi').css('color', '#d2d2d2')
				$('.modal input').css('border', '1px solid #e8e8e8')
				$('.modal select').css('border', '1px solid #e8e8e8')
			}         
		}
	}
</script>